import React from "react";
import "./index.scss";
import { ImageWithText } from "../img";

export interface ImageWithTextType {
  src: string;
  text?: string;
}

interface Props {
  imgs: (string | ImageWithTextType)[];
  /** 显示未显示人数 */
  showCount?: boolean;
  /** 最大数量 */
  maxLength?: number;
}
export const StackAvatars = ({ imgs, showCount, maxLength = 5 }: Props) => {
  const count = imgs.length - maxLength;
  let showImgs: (string | number | ImageWithTextType)[] = maxLength
    ? imgs.slice(0, maxLength)
    : imgs;
  showImgs = showCount ? showImgs.concat(count) : showImgs;
  return (
    <div className="stack-avatars">
      {showImgs.map((img, idx) => {
        if (idx === showImgs.length - 1 && typeof img === "number") {
          return (
            <div key={idx} style={{ zIndex: showImgs.length - idx }}>
              <span className="count">+{img}</span>
            </div>
          );
        }
        return (
          <div key={idx} style={{ zIndex: showImgs.length - idx }}>
            <ImageWithText
              className="img"
              src={`${(img as ImageWithTextType)?.src || img}`}
              text={(img as ImageWithTextType)?.text}
            />
          </div>
        );
      })}
    </div>
  );
};
